<template>
  <div class='feedback first-box'>
    <div class="head">
      <p class="type">反馈类型</p>

      <p class="choose">
        <span v-for="item in chooseData" :class="{pr:true,active:item.active}" @click="chooseType(item)">
          {{item.label}}
          <img v-show="item.active" class="pa" :src="imgs.choosed" alt="">
        </span>
      </p>

      <x-textarea :max="500" :placeholder="placeholder" height="150" v-model="info.content"></x-textarea>
      
    </div>
    <GreyLine></GreyLine>
    <Form class="form" :formData="formData" :formParam="formParam"></Form>
    <Buttons class="margin40" :buttonData="buttonData" ></Buttons>
    <p class="record btn-active"><span @click="$router.push('/member/feedback/records')">历史记录</span></p>
  </div>
</template>
<script>
import { XTextarea } from 'vux'
import GreyLine from '../../common/line.vue'
import Form from '../../common/form'
import Buttons from '../../common/button.vue'
export default {
  components: {XTextarea,GreyLine,Form,Buttons},
  name: "",
  data() {
    return {
      imgs:{
        choosed:require('../../../assets/img/vip/feedback/bac.png')
      },
      placeholder:"写下您的意见或者事情的经过，我们很注重您的感受。",
      chooseData:[
        {
          label:"保险",
          type:0,
          active:true,
        },{
          label:"续保",
          type:1,
          active:false,
        },{
          label:"保养",
          type:2,
          active:false,
        },{
          label:"其他",
          type:3,
          active:false,
        }
      ],

      info:{//参数
        content:"",
        type:0
      },

      formData:[
        {
          title:{
            show:false,
          },
          children:[
            {type:"input",label:"姓名",key:"realName",readonly:true},
            {type:"number",label:"手机号",key:"phone",},
          ],
        }
      ],
      formParam:{
        realName:"",
        phone:"",
      },
      buttonData:[
        {
          label:"提交",
          click:this.save
        }
      ]
    };
  },
  methods: {
    chooseType(item){
      this.chooseData.forEach(ele=>{
        ele.active=false
      })
      this.info.type=item.type
      this.$set(item,"active",true)
    },

    save(){
      var params={
        userId:sessionStorage.getItem("userId"),
        type:this.info.type,
        message:this.info.content
      }
      if(!params.message){
        _g.toMessage({status:1,msg:"反馈内容不能为空"})
        return
      }
      _g.apiPost("vipFeedback/insert.do",params).then(res=>{
        if(res.status==0){
          this.$router.push("/member/feedback/result")
        }
      })
      
    },
    getList(){
      var params={
        // userId:sessionStorage.getItem("userId")
      }
      _g.apiPost("vipFeedback/init.do",params).then(res=>{
        this.formParam.realName=res.data.user.realName
        this.formParam.phone=res.data.user.phone
      })
    }

  },
  created() {
    this.getList()
  }
};
</script>
<style lang="scss" scoped>
.feedback {

  .head{
    padding: 15px;

    .type{
      font-size: 16px;
      margin-bottom: 10px;
    }
    .choose{
      display: flex;
      justify-content: space-between;

      >span{
        display: inline-block;
        text-align: center;
        width: 22%;
        height: 27px;
        box-sizing: border-box;
        border: 1px solid #DCDCDC;
        color: #666;
        font-size: 14px;
        line-height: 25px;
        border-radius: 2px;
      }
      .active{
        border-color:#F39519
      }

      img{
        width: 15px;
        height: 15px;
        right: 0;
        bottom: 0;
        border-bottom-right-radius: 1px;
      }
    }
  }

  .form{
    margin-top: 0px;
  }

  .margin40{
    margin: 40px 30px 20px;
  }
  .record{
    text-align: center;
    text-decoration: underline;
    font-size: 14px;
    color: #999;
  }
}
</style>